<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            /* column-count: 3; */
            column-width: 400px;
        }
        
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./upload/01.png" alt="">
        <img src="./upload/02.png" alt="">
        <img src="./upload/03.png" alt=""> <img src="./upload/01.png" alt="">
        <img src="./upload/02.png" alt="">
        <img src="./upload/03.png" alt=""> <img src="./upload/01.png" alt="">
        <img src="./upload/02.png" alt="">
        <img src="./upload/03.png" alt=""> <img src="./upload/01.png" alt="">
        <img src="./upload/02.png" alt="">
        <img src="./upload/03.png" alt=""> <img src="./upload/01.png" alt="">
        <img src="./upload/02.png" alt="">
        <img src="./upload/03.png" alt="">
    </div>
    <script src="./jq3.6.js"></script>
    <script>
        $(function() {
            // 获取图片的宽度(200px)
            let imgWidth = $('img').outerWidth(); // 200

            waterfallHandler();

            // 瀑布流处理
            function waterfallHandler() {
                // 获取图片的列数
                let column = parseInt($(window).width() / imgWidth);

                // 高度数组
                let heightArr = [];
                for (let i = 0; i < column; i++) {
                    heightArr[i] = 0;
                }

                // 遍历所有图片进行定位处理
                $.each($('img'), function(index, item) {
                    // 当前元素的高度
                    let itemHeight = $(item).outerHeight();
                    // 高度数组最小的高度
                    let minHeight = Math.min(...heightArr);
                    // 高度数组最小的高度的索引
                    let minIndex = heightArr.indexOf(minHeight);

                    $(item).css({
                        position: 'absolute',
                        top: minHeight + 'px',
                        left: minIndex * imgWidth + 'px'
                    });

                    heightArr[minIndex] += itemHeight;
                });
            }

            // 窗口大小改变
            $(window).resize(function() {
                waterfallHandler();
            });
        });
    </script>

</html>
</body>

</html>